<template>
    <div id="orderList">
        <el-row justify="center" class="select">
            <el-form class="select_from" :inline="true" label-width="80px" :model="select">
                <el-form-item label="订单编号">
                    <el-input v-model="select.orderNumber"></el-input>
                </el-form-item>
                <el-form-item label-width="90px" label="下单人电话">
                    <el-input v-model="select.orderMobile"></el-input>
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-select v-model="select.orderStatus">
                        <el-option v-for="item in select.orderStatusItem" :key="item.value" :value="item.value" :label="item.text">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单类型">
                    <el-select v-model="select.orderCategory">
                        <el-option v-for="item in select.orderCategoryItem" :key="item.value" :value="item.value" :label="item.text">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="下单时间">
                    <el-date-picker v-model="select.addTime" type="datetimerange" placeholder="选择时间范围"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="load" @click="find" size="primary">查询</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row style="padding-top:35px">
            <el-table v-loading="load" element-loading-text="数据加载中" :data="orderItem" border style="width:100%">
                <el-table-column fixed="left"  width="120" label="下单人姓名" prop="orderName">
                </el-table-column>
                <el-table-column fixed="left" width="150" label="下单人电话" prop="orderMobile">
                </el-table-column>
                <el-table-column fixed="left" width="100" label="订单状态" prop="orderStatus"></el-table-column>
                <el-table-column fixed="left" width="100" label="订单类型" prop="orderCategory"></el-table-column>
                <el-table-column fixed="left" width="150" label="订单编号" prop="orderCode"></el-table-column>
                <el-table-column fixed="left" width="200" label="下单时间" prop="addTime"></el-table-column>
                <el-table-column  label="订单地址信息">
                    <el-table-column width="150" label="收件人姓名" prop="deliveryName">
                    </el-table-column>
                    <el-table-column width="150" label="收件人电话" prop="deliveryMobile">
                    </el-table-column>
                    <el-table-column width="80" label="省" prop="province">
                    </el-table-column>
                    <el-table-column width="80" label="市" prop="city">
                    </el-table-column>
                    <el-table-column width="100" label="地区" prop="district">
                    </el-table-column>
                    <el-table-column width="300" label="详细地址" prop="addressDetailed">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="支付信息">
                    <el-table-column width="100" label="支付积分" prop="integral"></el-table-column>
                    <el-table-column width="100" label="支付金额" prop="paymentAmount"></el-table-column>
                    <el-table-column width="200" label="支付时间" prop="payentTime"></el-table-column>
                    <el-table-column width="300" label="第三方流水号" prop="transactionId"></el-table-column>
                </el-table-column>
                <el-table-column fixed="right" width="150" label="操作">
                    <template scope="scope">
                        <el-button size="small" type="primary" icon="edit"></el-button>
                        <el-button size="small" type="primary" icon="share"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row style="padding-top:35px">
            <el-pagination @size-change="setPageSize" @current-change="next" :page-sizes="[20,35,50]" :page-size="20" :page-count="total" :current-page="pageIndex">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
import api from '../../api/apiConf'

export default {
    data() {
        return {
            select: {
                orderNumber: "",
                orderMobile: "",
                orderCategory: "",
                orderStatus:"",
                addTime: "",
                orderStatusItem: [{
                    text: "未付款", value: 0
                },
                {
                    text: "已付款", value: 1
                }, {
                    text: "已发货", value: 2
                }, {
                    text: "已完成", value: 3
                }],
                orderCategoryItem: [
                    {
                        text: "消费", value: 1,
                    }, {
                        text: "加盟", value: 2
                    }, {
                        text: "体验", value: 3
                    }, {
                        text: "补单", value: 4
                    }
                ]
            },
            orderItem: [],
            load: false,
            pageIndex: 1,
            pageSize: 20,
            total: 0
        }
    },
    methods: {
        loadOrder() {
            let param = {
                orderNumber: this.select.orderNumber,
                orderMobile: this.select.orderMobile,
                orderCategory: this.select.orderCategory,
                orderStatus: this.select.orderStatus,
                addTime: this.select.addTime,
                pageIndex: this.pageIndex,  
                pageSize: this.pageSize
            }
            this.load = true;
            api.order.getItem(param).then(response => {
                this.load = false;
                this.orderItem = response.data.result.item;
                this.total = response.data.result.total;
                let abc = 0;
            });
        },
        setPageSize(val) {
            this.pageSize = val;
            this.loadOrder();
        },
        next(val) {
            this.pageIndex = val;
        },
        find() {
            this.pageIndex = 1;
            this.loadOrder();
        }
    },
    mounted() {
        this.loadOrder();
    }
}
</script>

<style>

</style>
